﻿<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage" >
        <template #left>
            <l-panel :title="$t('左侧树形')" style="padding-right:0;" >
                <el-tree class="learun-tree" v-loading="treeLoading" :data="treeData" default-expand-all :expand-on-click-node="false"  @node-click="handleNodeClick">
                    <span class="lr-tree-node"  slot-scope="{node}">
                        {{ $t(node.label) }}
                    </span>
                </el-tree>
            </l-panel>
        </template>

        <l-panel style="padding-left:0;" >
            <template #toolLeft >
                <l-query2 :items="queryItems" :formData="queryData" :loading="tableLoading" @search="handleSearch">
                    <template #f_text >
                        <el-input v-model="queryData.f_text" :placeholder="$t('please enter')" />
                    </template>
                </l-query2>
            </template>
            <template #toolRight >
                <l-tool-btns  :hasTableSetting="true" @setting="lr_handleSettingTable" @click="handleAdd()" >
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table 
                ref="mainTable" 
                :loading="tableLoading" 
                :columns="lr_getPageColumns(columns)" 
                :dataSource="tableData"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"
                @loadPageData="turnTablePage"

                
                >
                <template v-for="(col,index) in lr_tableColumnsByToLabel(lr_getPageColumns(columns))" v-slot:[col.prop]="scope" >
                    <l-value-to-label
                    :value="scope.row[col.prop]"
                    :type="col.dataType"
                    :code="col.dataCode"
                    :valueKey="col.valueKey"
                    :labelKey="col.labelKey"
                    :options="col.options"
                    :format="col.format"
                    :setting="col.setting"
                    :key="index" ></l-value-to-label>
                </template>
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <!--表单-->
        <l-dialog :title="$t(formTitle)"
                  :visible.sync="formVisible"
                  :height="400"
                  :width="600"
                  @ok="handleSave"
                  @close="handleCloseForm"
                  @opened="handleOpenedForm">
            <my-form ref="form" :isReadOnly="formDetails" ></my-form>
        </l-dialog>
        
    </l-layout>
</template>

<script>
    import MyForm from './form'
    const api = window.$api.test.test

    export default {
        components: {
            MyForm,
            
        },
        data() {
            return {
                lr_isPage: true,
                moduleCode: 'test_test',
                // 左侧树形数据参数
                treeLoading:false,
                treeCategory:'',

                // query参数
                queryData:{
                    f_text:'',
                },

                queryItems:[
                    {label:'文本',prop:'f_text'},
                ],

                // 表格参数
                tableLoading: false,
                tableData:[],
                tableTotal:0,
                tableCurrentPage:1,
                tablePageSize:50,
                columns: [
                    {label:'文本',prop:'f_text',minWidth:120,align:'left',dataType:'input'},
                ],
                tableBtns:[
                    {prop:'Edit',label:'Edit'},
                    {prop:'Delete',label:'Delete'},
                    {prop:'Details',label:'Details'},
                ],

                // 表单参数
                formVisible:false,
                formTitle:'',
                formEditRow:null,
                formEdit: false,
                formDetails: false,
            }
        },
        computed: {
            // 左侧树形数据参数
            treeData(){
                return this.lr_DataSourceTree(this.lr_dataSourceData['dataitemc'],'f_itemid','f_parentid','f_itemcode','f_itemname')
            },


            
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.lr_loadDataSourceData('dataitemc')
                this.loadTableData()

                
            },
            handleNodeClick(node) {
                this.treeCategory = node.value
                this.loadTableData(true)
            },

            handleSearch(){
                this.loadTableData()
            },
            turnTablePage({rows}){
                this.tablePageSize = rows
                this.loadTableData(true)
            },
            async loadTableData(isNotFirst){
                if(!isNotFirst){
                    this.tableCurrentPage = 1
                }
                this.tableLoading = true
                console.log(this.queryData,'this.queryData')
                let queryData = this.$deepClone(this.queryData)
                console.log(queryData,'this.queryData')
                
                queryData.rows = this.tablePageSize
                queryData.page = this.tableCurrentPage
                queryData.sidx = 'F_Id'
                //queryData.f_text = this.treeCategory
                let data = await this.$awaitWraper(api.getPage(queryData))
                if(data != null){
                    this.tableData = data.rows
                    this.tableTotal = data.records
                }
                else{
                    this.tableData = []
                }
                this.tableLoading = false
            },

            handleAdd(){
                this.formEdit = false
                this.formDetails = false
                this.handleShowForm('Add')
            },
            handleEdit($index,row){
                this.formEdit = true
                this.formDetails = false
                this.formEditRow = row
                this.handleShowForm('Edit')
            },
            handleDelete($index,row){
                this.$confirm(this.$t('This operation will permanently delete the data. Do you want to continue?'), this.$t('Tips'), {
                confirmButtonText: this.$t('confirm'),
                cancelButtonText: this.$t('cancel'),
                type: 'warning'
                }).then(async () => {
                    this.tableData.splice($index,1);
                    this.tableTotal--
                    await api.remove(row.f_Id)
                    this.$message({
                        type: 'success',
                        message: this.$t('Delete  success')
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: this.$t('Delete has been canceled!')
                    })
                })
            },
            handleDetails($index,row){
                this.formEdit = true
                this.formDetails = true
                this.formEditRow = row
                this.handleShowForm('Details')
            },

            async handleSave(showLoading, hideLoading) {
                showLoading('saving data...')
                if (await this.$refs.form.validateForm()) {
                    const res = await this.$refs.form.saveForm({ keyValue: this.formEdit? this.formEditRow.f_Id :'', isEdit: this.formEdit })
                    if (res) {
                        const msg = this.formEdit ? '更新成功!' : 'Add成功!'
                        this.$message({
                            type: 'success',
                            message: this.$t(msg)
                        })
                        this.loadTableData()
                        this.formVisible = false
                    }
                }
                hideLoading()
            },

            handleShowForm(text) {
                this.formTitle = text
                this.formVisible = true
            },
            async handleOpenedForm(showLoading, hideLoading) {
                if (this.formEdit) {
                    showLoading('Loading data...')
                    await this.$refs.form.loadFormData({ keyValue: this.formEditRow.f_Id })
                    hideLoading()
                }
            },
            handleCloseForm() {
                this.$refs.form.resetForm()
            }
        }
    }
</script>
